<template>
  <Row>
  <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="color: black">
    <h4 class="m-n font-thin pull-left">对象存储OSS > 概览 </h4>
  </div>

  <div class="wrapper-md">
    <div class="panel panel-default form-horizontal form" role="form" >
      <div class="panel-heading" style="color: cornflowerblue">
        <strong>新致云对象存储服务（Object Storage Service，简称 OSS），</strong>
        是新致云提供的海量、安全、低成本、高可靠的云存储服务。您可以在任何应用、任何时间、任何地点上传和下载数据，也可以通过 Web 控制台对数据进行简单的管理。
        OSS 适合存放任意类型的文件，适合各种网站、开发企业及开发者使用。按实际容量付费真正使您专注于核心业务。
      </div>


      <Row type="flex" justify="space-between" class="control" style="color: gainsboro">
        <div class="table-style">
        <Button @click="refresh = true" ><Icon type="refresh"><i class="fa fa-trash"></i> </Icon>刷新</Button>
        <Button @click="bucketAdd = true" ><Icon type="plus-round"><i class="fa fa-plus"></i></Icon> 新建Bucket</Button>
      </div>
        <div class="search-bar">
        <Input placeholder="请输入 ..." v-model="keyword" style="width: 300px"></Input>
        <Button type="ghost" @click="search"><Icon type="ios-search"><i class="fa fa-search"></i></Icon></Button>
      </div>
      </Row>

      <!-- 2.2 显示内容表格 -->
      <Table stripe :data="tableData"
             :columns="tableColumns"
             @on-select="onSelect"
             @on-select-all="onSelectAll"
             @on-selection-change="onSelectionChange">
      </Table>
      <!-- 2.3 分页导航navigation -->
      <Row type="flex" justify="space-between" class="footer">
        <div></div>
        <div style="margin: 10px;overflow: hidden">
          <Page :total="total" @on-page-size-change="pageSizeChange" @on-change="changePage" :current="pageNumber" :pageSize="pageSize" size="small" placement="top" show-elevator show-sizer ></Page>
        </div>
      </Row>
    </div>
  </div>
  </Row>
</template>

<script>
  export default {
    data () {
      return {
        tableColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: 'id',
            key: 'id'
          },
          {
            title: 'bucket名称',
            key: 'bucketName'
          },
          {
            title: '地域',
            key: 'regionName'
          },
          {
            title: '创建时间',
            key: 'createdDate'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editShow(params)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.editRemove(params)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ]
      }
    }
  }
</script>

